<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url() no-repeat 10px center;
  text-decoration: none; }

h1 tt, h1 code {
  font-size: inherit; }

h2 tt, h2 code {
  font-size: inherit; }

h3 tt, h3 code {
  font-size: inherit; }

h4 tt, h4 code {
  font-size: inherit; }

h5 tt, h5 code {
  font-size: inherit; }

h6 tt, h6 code {
  font-size: inherit; }

h1 {
  font-size: 28px;
  color: black; }

h2 {
  font-size: 24px;
  border-bottom: 1px solid #cccccc;
  color: black; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

h5 {
  font-size: 14px; }

h6 {
  color: #777777;
  font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 15px 0; }

hr {
  background: transparent url() repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0;
}

body > h2:first-child {
  margin-top: 0;
  padding-top: 0; }
body > h1:first-child {
  margin-top: 0;
  padding-top: 0; }
  body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0; }

li p.first {
  display: inline-block; }
li {
  margin: 0; }
ul, ol {
  padding-left: 30px; }

ul :first-child, ol :first-child {
  margin-top: 0; }

dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  color: #777777; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

table {
  padding: 0;border-collapse: collapse; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

img {
  max-width: 100%; }

span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px; }

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent; }

.highlight pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }

pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }
  pre code, pre tt {
    background-color: transparent;
    border: none; }

sup {
    font-size: 0.83em;
    vertical-align: super;
    line-height: 0;
}
* {
	-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
    body {
        width: 854px;
        margin:0 auto;
    }
}
@media print {
	table, pre {
		page-break-inside: avoid;
	}
	pre {
		word-wrap: break-word;
	}
}
</style>
<title>表单与HTML</title>

</head>
<body>
<h1>表单与HTML</h1>

<ul>
<li><a href="#opening-a-form">创建表单</a></li>
<li><a href="#csrf-protection">CSRF保护</a></li>
<li><a href="#form-model-binding">表单模型绑定</a></li>
<li><a href="#labels">标签</a></li>
<li><a href="#text">文本框、多行文本框、密码框以及隐藏域</a></li>
<li><a href="#checkboxes-and-radio-buttons">复选框和单选按钮</a></li>
<li><a href="#file-input">文件上传域</a></li>
<li><a href="#drop-down-lists">下拉列表</a></li>
<li><a href="#buttons">按钮</a></li>
<li><a href="#custom-macros">定制宏</a></li>
</ul>


<p><a name="opening-a-form"></a></p>

<h2>创建表单</h2>

<p><strong>创建一个表单</strong></p>

<pre><code>{{ Form::open(array('url' =&gt; 'foo/bar')) }}
    //
{{ Form::close() }}
</code></pre>

<p>默认情况下，表单使用 <code>POST</code> 方法，您可以很容易使用另一种方法：</p>

<pre><code>echo Form::open(array('url' =&gt; 'foo/bar', 'method' =&gt; 'put'))
</code></pre>

<blockquote><p><strong>注意:</strong> 因为 HTML 表单只支持 <code>POST</code> 和 <code>GET</code> 方法， <code>PUT</code> 和 <code>DELETE</code> 方法将通过自动添加一个 <code>_method</code> 隐藏域到表单的方式进行模拟。</p></blockquote>

<p>您也可以通过指向命名路由或控制器函数打开一个表单：</p>

<pre><code>echo Form::open(array('route' =&gt; 'route.name'))

echo Form::open(array('action' =&gt; 'Controller@method'))
</code></pre>

<p>您同样可以传递路由参数：</p>

<pre><code>echo Form::open(array('route' =&gt; array('route.name', $user-&gt;id)))

echo Form::open(array('action' =&gt; array('Controller@method', $user-&gt;id)))
</code></pre>

<p>如果您的表单需要允许文件上传，请在数组参数中添加一个 <code>files</code> 选项：</p>

<pre><code>echo Form::open(array('url' =&gt; 'foo/bar', 'files' =&gt; true))
</code></pre>

<p><a name="csrf-protection"></a></p>

<h2>CSRF保护</h2>

<p>Laravel 提供了一个简单的办法保护您的应用抵御跨域攻击。首先，一个随机的令牌添加在用户的 Session 中。无需劳作，这将自动完成。CSRF 令牌将将自动以隐藏域添加到表单中。如果你希望自己为这个隐藏域产生 HTML 代码，可以使用 <code>token</code> 函数:</p>

<p><strong>在表单中手动添加一个 CSRF 令牌</strong></p>

<pre><code>echo Form::token();
</code></pre>

<p><strong>在一个路由上附加 CSRF 过滤器</strong></p>

<pre><code>Route::post('profile', array('before' =&gt; 'csrf', function()
{
    //
}));
</code></pre>

<p><a name="form-model-binding"></a></p>

<h2>表单模型绑定</h2>

<p>经常您希望基于一个模型的内容填充一个表单。可以使用 <code>Form::model</code> 实现这个功能：</p>

<p><strong>打开一个模型表单</strong></p>

<pre><code>echo Form::model($user, array('route' =&gt; array('user.update', $user-&gt;id)))
</code></pre>

<p>现在当您生成一个表单元素，比如一个文本输入框，模型中与此相同名字的的值将被设置为文本框的值。比如，对于一个命名为 <code>email</code> 的文本框，用户模型的 <code>email</code> 属性的值将被设为它的值。而且，还有更多。如果在闪存中有符合输入名的值，将优先于模型中的值。所以优先级应该是这个样子：</p>

<ol>
<li>闪存中的值(旧输入)</li>
<li>输入值</li>
<li>模型中属性的值</li>
</ol>


<p>这将允许我们快速构建表单，不仅能够绑定模型的值，还可以在验证出错的时候轻松地重新填充表单。</p>

<blockquote><p><strong>注意:</strong> 当使用 <code>Form::model</code> 的时候，请确认已使用 <code>Form::close</code> 关闭您的表单！</p></blockquote>

<p><a name="labels"></a></p>

<h2>标签</h2>

<p><strong>创建一个标签元素</strong></p>

<pre><code>echo Form::label('email', 'E-Mail Address');
</code></pre>

<p><strong>指定其他 HTML 属性</strong></p>

<pre><code>echo Form::label('email', 'E-Mail Address', array('class' =&gt; 'awesome'));
</code></pre>

<blockquote><p><strong>注意:</strong> 创建一个标签元素后，您创建的任何与标签元素同名的表单元素将自动获取一个与名字相同的ID。</p></blockquote>

<p><a name="text"></a></p>

<h2>文本框、多行文本框、密码框以及隐藏域</h2>

<p><strong>创建一个文本框</strong></p>

<pre><code>echo Form::text('username');
</code></pre>

<p><strong>指定默认值</strong></p>

<pre><code>echo Form::text('email', 'example@gmail.com');
</code></pre>

<blockquote><p><strong>注意:</strong> <em>hidden</em> 和 <em>textarea</em> 方法拥有和 <em>text</em> 方法一样的形式。</p></blockquote>

<p><strong>创建一个密码框</strong></p>

<pre><code>echo Form::password('password');
</code></pre>

<p><strong>创建其他输入框</strong></p>

<pre><code>echo Form::date($name, $value = null, $attributes = array());
echo Form::email($name, $value = null, $attributes = array());
echo Form::file($name, $attributes = array());
echo Form::number($name, $value = null, $attributes = array());
echo Form::search($name, $value = null, $attributes = array());
echo Form::telephone($name, $value = null, $attributes = array());
echo Form::url($name, $value = null, $attributes = array());
</code></pre>

<p><a name="checkboxes-and-radio-buttons"></a></p>

<h2>复选框和单选按钮</h2>

<p><strong>创建一个复选框或单选按钮</strong></p>

<pre><code>echo Form::checkbox('name', 'value');

echo Form::radio('name', 'value');
</code></pre>

<p><strong>创建一个被选中的复选框或单选按钮</strong></p>

<pre><code>echo Form::checkbox('name', 'value', true);

echo Form::radio('name', 'value', true);
</code></pre>

<p><a name="file-input"></a></p>

<h2>文件上传域</h2>

<p><strong>创建一个文件上传域</strong></p>

<pre><code>echo Form::file('image');
</code></pre>

<p><a name="drop-down-lists"></a></p>

<h2>下拉列表</h2>

<p><strong>创建一个下拉列表</strong></p>

<pre><code>echo Form::select('size', array('L' =&gt; 'Large', 'S' =&gt; 'Small'));
</code></pre>

<p><strong>创建一个有默认选中值的下拉列表</strong></p>

<pre><code>echo Form::select('size', array('L' =&gt; 'Large', 'S' =&gt; 'Small'), 'S');
</code></pre>

<p><strong>创建一个分组的下拉列表</strong></p>

<pre><code>echo Form::select('animal', array(
    'Cats' =&gt; array('leopard' =&gt; 'Leopard'),
    'Dogs' =&gt; array('spaniel' =&gt; 'Spaniel'),
));
</code></pre>

<p><a name="buttons"></a></p>

<h2>按钮</h2>

<p><strong>创建一个提交按钮</strong></p>

<pre><code>echo Form::submit('Click Me!');
</code></pre>

<blockquote><p><strong>注意:</strong> 需要创建一个按钮吗？尝试使用 <em>button</em> 方法，它拥有和 <em>submit</em> 一样的形式。</p></blockquote>

<p><a name="custom-macros"></a></p>

<h2>定制宏</h2>

<p>自定义一个定制的表单元素的助手函数也被称作为 "macros" 是很简单的事情。这里将展示如何实现。首先，使用一个给定的名字以及一个闭包函数注册一个宏：</p>

<p><strong>注册一个表单宏</strong></p>

<pre><code>Form::macro('myField', function()
{
    return '&lt;input type="awesome"&gt;';
});
</code></pre>

<p>现在您可以通过它的名字调用这个宏：</p>

<p><strong>调用一个定制的表单宏</strong></p>

<pre><code>echo Form::myField();
</code></pre>
</body>
</html>